<template>
    <div>
      <el-button type="primary" color="#7c55e6">按钮</el-button>
  
      <div>
        <el-form ref="formRef" style="max-width: 600px" :model="numberValidateForm" label-width="auto"
          class="demo-ruleForm">
          <el-form-item label="age" prop="age" :rules="[
            { required: true, message: 'age is required' },
            { type: 'number', message: 'age must be a number' },
          ]">
            <el-input v-model.number="numberValidateForm.age" type="text" autocomplete="off" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm(formRef)">Submit</el-button>
            <el-button @click="resetForm(formRef)">Reset</el-button>
          </el-form-item>
        </el-form>
      </div>
  
      <div>
        <el-input v-model="input" style="width: 240px" placeholder="Please input" />
      </div>
    </div>
  </template>
  <script setup>
  import { ref, reactive } from 'vue'
  const formRef = ref()
  
  const input = ref('')
  
  const numberValidateForm = reactive({
    age: '',
  })
  
  const submitForm = (formEl) => {
    if (!formEl) return
    formEl.validate((valid) => {
      if (valid) {
        console.log('submit!')
      } else {
        console.log('error submit!')
      }
    })
  }
  
  const resetForm = (formEl) => {
    if (!formEl) return
    formEl.resetFields()
  }
  </script>
  <style scoped>
  /* .el-button {
    background-color: greenyellow;
  } */
  </style>